<template>
  <div id="app">
    <FormCreator :conf="LoginConf"></FormCreator>
    <div>
      {{ LoginConf }}
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  components: {
    FormCreator: () => import("./components/FormCreator.vue"),
  },
  data() {
    return {
      LoginConf: {
        title: "登录",
        form: {
          username: "",
          password: "",
          confirmPas: "",
          gener: "",
        },
        rules: {
          username: [
            {
              required: true,
              message: "请输入用户名",
              trigger: ["blur", "change"],
            },
          ],
          password: [
            {
              required: true,
              message: "请输入密码",
              trigger: ["blur", "change"],
            },
          ],
          confirmPas: [
            {
              required: true,
              message: "请输入确认密码",
              trigger: ["blur", "change"],
            },
          ],
        },
        items: [
          [
            {
              label: "用户名",
              type: "input",
              key: "username",
              col: 24,
              value: "Green",
            },
          ],
          [
            { label: "密码", type: "input", key: "password", col: 12 },
            { label: "确认密码", type: "input", key: "confirmPas", col: 12 },
          ],
          [
            {
              label: "性别",
              type: "select",
              key: "gener",
              col: 12,
              value: 0,
              options: [
                { label: "男", value: 0 },
                { label: "女", value: 1 },
              ],
            },
          ],
          [],
        ],
      },
    };
  },
};
</script>

<style></style>
